<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary" @click="addrouter">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
 
</el-row>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'


export default {
  name: 'home',
  components: {
    HelloWorld
  },
    data() {
    return {
     
    }
  },
 
  methods: {
    addrouter() {
      const routeradd=[{
      path: '/routeradd',
      name: 'routeradd',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ '@/views/routeradd.vue')
    }]
      this.$router.addRoutes(routeradd)
      this.$router.push('/about')
    }
  }
}
</script>

<style scoped>
.home{
  padding: 32px;
}
</style>
